<template>
    <div class="page">


        <div class="main-title">
            <span>申请提现</span>
        </div>

        <div class="page-ctx">
            <div class="section">
                <div class="section-ctx">


                    <div class="item">
                        <span class="text">收款人姓名：</span>
                        <span class="info">
                            <el-input clearable type="text" v-model="form.realName" />
                        </span>
                        <span class="action"> </span>
                    </div>
                    <div class="item">
                        <span class="text">银行账号：</span>
                        <span class="info">
                            <el-input clearable type="text" v-model="form.address" />
                        </span>
                        <span class="action"> </span>
                    </div>
                    <div class="item">
                        <span class="text">开户银行：</span>
                        <span class="info">
                            <el-input clearable type="text" v-model="form.address" />
                        </span>
                        <span class="action"> </span>
                    </div>
                    <div class="item">
                        <span class="text">提现金额：</span>
                        <span class="info">
                            <el-input clearable type="text" v-model="form.address" />
                        </span>
                        <span class="action"> </span>
                    </div>
                    <div class="item">
                        <span class="text"></span>
                        <span class="infotext">
                            最低提现额度：￥ 100.00
                        </span>
                        <span class="action"> </span>
                    </div>
                </div>
            </div>

            <div class="other">
                <!-- <div class="section-title">个人信息</div> -->
                <div class="section-ctx">
                    <div class="item btn-box">
                        <span class="text" style="visibility: hidden">-</span>
                        <div class="info">
                            <el-button class="btn-ripple fit-text btn-save" @click="throttle_do_submit()"
                                :loading="loading">提交申请</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <phone_bind_old_check_modal ref="phone_bind_old_check_modal" data-title="校验" @confirm="confirm_old_pass" />
        <phone_bind_new_set_modal ref="phone_bind_new_set_modal" data-title="绑定" @confirm="confirm_new" />


    </div>
</template>

<script>
import { UPLOAD_ACTION, UPLOAD_NAME } from '@/config/env.js'

import phone_bind_old_check_modal from "@/components/account/phone_bind_old_check_modal.vue";
import phone_bind_new_set_modal from "@/components/account/phone_bind_new_set_modal.vue";


import { mapState } from "vuex";

export default {
    name: "servicePage",
    components: {
        phone_bind_old_check_modal,
        phone_bind_new_set_modal,
    },
    data() {
        return {
            UPLOAD_ACTION,
            UPLOAD_NAME,

            my_info: {},
            form: {
                image: "",
                realName: "",
                address: "",
            },
            loading: false,
        };
    },
    computed: {
        ...mapState([""]),
    },
    watch: {},
    created() {
        this.throttle_do_submit = this.mix_throttle(this.do_submit, 1000)
        this.setView();
    },
    methods: {
        throttle_do_submit() {

        },

        open_phone_update() {
            this.$refs.phone_bind_old_check_modal.init();
        },
        confirm_old_pass() {
            this.$refs.phone_bind_new_set_modal.init();
        },
        confirm_new() {
            this.query_user()
        },

        setView() {
            this.query_user();
        },
        query_user() {
            // this.$store.dispatch("query_user");
            this.$api({
                url: '/service.php',
                method: 'get',
                data: {
                    action: 'users_userInfo',
                },
            }).then(res => {
                if (res.code == 200) {
                    let data = res.data;
                    this.my_info = data;

                    this.form = {
                        image: data.image || "",
                        realName: data.realName || "",
                        address: data.address || "",
                    };


                    this.$store.commit("set_vuex_user", res.data);
                }
            })
        },

        do_submit() {
            this.loading = true;
            this.$api({
                url: '/service.php',
                method: 'get',
                data: {
                    action: 'users_editInfo',
                    ...this.form
                },
            }).then((res) => {
                let { code, msg, data } = res;
                alert(res).then(() => {
                    this.loading = false;
                });
                if (code == 200) {
                    this.setView();
                }
            });
        },

        do_reset() {
            this.form = {
                image: this.my_info.image,
                realName: "",
                address: "",
            };
        },


        //上传相关
        upload_on_success(res, file) {
            //console.log("上传结果", res);
            let { code, data, msg } = res;
            alert(res);
            if (code == 200) {
                this.form.image = res.data;
            }
        },
        upload_before_upload(file) {
            const isLt2M = file.size / 1024 / 1024 < 20; //文件大小
            return isLt2M;
        },
    },
};
</script>

<style scoped lang="less">
.user-avatar {
    object-fit: cover;
}

.page {
    text-align: left;
    padding-bottom: 80px;

    .main-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        text-align: left;
        height: 56px;
        line-height: 56px;
        background: #ffffff;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;

        button {
            min-width: 96px;
            height: 30px;
            line-height: 30px;
            background: #009F39;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
    }

    .page-ctx {
        margin-top: 24px;
        padding: 80px 100px;
        background: #fff;
    }
}

.page {
    .page-ctx {
        padding-bottom: 80px;

        .section {
            // padding-bottom: 27px;
            // margin-bottom: 40px;
            // border-bottom: 1px solid #dbdbdb;
        }

        .section-title {
            margin-bottom: 50px;
            font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #666666;
        }

        .section-ctx {
            // padding-top: 32px;
        }

        .upload-box {
            img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }

        .item {
            margin-bottom: 23px;
            display: flex;
            align-items: center;

            .text {
                display: inline-block;
                min-width: 100px;
                text-align: right;
                font-weight: 400;
                font-size: 14px;
                color: #4D4D4D;
            }

            .infotext{
                font-weight: 400;
                font-size: 14px;
                color: #747474;
                margin-top: -12px;
                padding-left: 10px;
            }
            .info {
                padding-left: 10px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                display: inline-block;
                min-width: 120px;

                input {
                    // width: 400px;
                    // height: 40px;
                     background: #FAFAFA;
                    border-radius: 4px 4px 4px 4px;
                    // border: 1px solid #d4d4d4;
                }

                .el-input {
                    width: 630px;
                    background: #FAFAFA;
                    border-radius: 4px 4px 4px 4px;
                    // height: 40px;
                }
            }

            .action {
                margin-left: 20px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #009F39;

                span {
                    margin-right: 20px;
                    cursor: pointer;
                }
            }
        }
    }
}


.btn-box {
    button {
        width: 76px;
        height: 40px;
    }

    .btn-save {
        width: 200px;
height: 48px;
background: #EF1F1F;
border-radius: 4px 4px 4px 4px;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
line-height: 48px;
text-align: center;

    }

    .btn-cancel {
        margin-left: 20px;
        width: 120px;
        height: 32px;
        background: #009F39;
        border-radius: 50px 50px 50px 50px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
    }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/my-info.less"></style>